import { BaseEdge, getStraightPath } from "@xyflow/react";
import type { EdgeProps } from "@xyflow/react";
import { memo } from "react";

interface GraphEdgeProps extends EdgeProps {
  data: {
    label: string;
  };
}

export const GraphEdge = memo((props: GraphEdgeProps) => {
  const { id, selected, sourceX, sourceY, targetX, targetY } = props;
  const [edgePath] = getStraightPath({
    sourceX,
    sourceY,
    targetX,
    targetY
  });

  const edgeStyle = {
    strokeStyle: selected ? "solid" : "dashed",
    strokeDasharray: selected ? "0" : "6 6", // 虚线间隔更明显
    stroke: selected ? "#2B6CB0" : "#A0AEC0", // 选中时深蓝，非选中时灰蓝
    strokeWidth: selected ? 2 : 1, // 线宽加粗
    filter: selected ? "drop-shadow(0 0 4px rgba(49, 130, 206, 0.7))" : "none" // 选中时加发光阴影
  };

  return (
    <>
      <BaseEdge id={id} path={edgePath} style={edgeStyle} />
    </>
  );
});
